<template>
<div class="container">
  <van-nav-bar
      title="编辑信息"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
  />
  <div class="logoImg">
    <van-uploader v-model="fileList" :after-read="afterRead" multiple :max-count="1" />
  </div>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="nickname"
          name="昵称"
          label="昵称"
          placeholder="昵称"
          :rules="[{ required: false, message: '请填写用昵称' }]"
      />
      <van-field
          v-model="password"
          :type="type"
          name="密码"
          label="密码"
          placeholder="密码"
          right-icon="eye-o"
          @click-right-icon="showPassword"
          :rules="[{ required: false, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>

</div>
</template>

<script>
import {Toast} from "vant";

export default {
  name: "Edit",
  data(){
    return{
      fileList:[],
      password:'',
      nickname:'',
      goods_img:'',
      type:'password'

    }
  },
  methods:{
    onSubmit(){
      this.$http.patch('/users/changeInfo',{
        userimage:this.goods_img,
        nickname:this.nickname,
        password:this.password

      }).then((res)=>{
        if(res.data.code==0){
          Toast.success('修改信息成功');
          setTimeout(()=>{
            localStorage.removeItem('token')
            this.$router.back()
          },2500)
        }
      })
    },
    showPassword(){

      if(this.type=='password'){
        this.type='text'
      }else {
        this.type='password'
      }
    },
    afterRead(file){
      let param=new FormData()
      param.append("file",file.file)
      const config={
        headers:{
          "Content-Type":"multipart/form-data"
        }
      }
      this.$http.post('/goods/uploadImage',param,config).then(res=>{
        this.goods_img=res.data.result.goods_img
      })
    },
    onClickLeft(){
   this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
.container{
  padding: 50px 0 0 0 ;
  .logoImg{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}
</style>
